<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="app">
        <button @click='updateValue'>点击触发beforeUpdate,updated</button>
        <button onclick='deleteApp()'>点击触发beforeDestory,destoryed</button>
        <p ref='a'>{{ msg }}</p>
        <span v-text="span"></span>
        <span v-html="html"></span>
<!--        v-bind:可以简写为：-->
        <span v-bind:title="bind">悬浮几秒，查看标题</span>
        <span v-pre>{{ msg }}</span>
    </div>
    </body>
</html>
<script src="libs/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'hello',
            span: '向元素中输出文本内容',
            html:'<p>向元素中输出html内容<p>',
            bind:'绑定标题'
        },
        beforeCreate: function(){
            console.log('beforeCreate')
        },
        created: function(){
            console.log('created')
        },
        beforeMount: function(){
            console.log(this.$refs.a)
            // 上面的你会看到undefined,因为数据还没绑定上
            console.log('beforeMount')
        },
        mounted: function(){
            console.log(this.$refs.a)
            // 上面的你会看到p,因为数据绑定上了
            console.log('mounted')
        },
        beforeUpdate: function(){
            console.log('beforeUpdate')
        },
        updated: function(){
            console.log('updated')
        },
        beforeDestroy: function(){
            console.log('beforeDestory')
        },
        destroyed: function(){
            console.log('destoryed')
        },
        methods: {
            updateValue: function () {
                this.msg = 'ha'
            }
        }
    })
    function deleteApp() {
        app.$destroy()
    }
</script>
